<!doctype html>
<html>
<head>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
    <meta charset="UTF-8">
    <title>区域统计</title>

    {% include 'template/baseCss.volt' %}

    <link href="/css/jquery.vector-map.css" media="screen" rel="stylesheet" type="text/css">
    <link href="/css/vendor/common-grid.less" rel="stylesheet/less" type="text/css">
    <link href="/css/vendor/zone-statistics.less" rel="stylesheet/less" type="text/css">

    <script src="/js/less.min.js"></script>
</head>

<body>
<main>
    <div class="filter-wrap">
        <div class="title-bar">
            <label>过滤器</label>
            <img class="filter-toggle-icon button rotate-180" onClick="zoneStatisticsM.clickFilterToggle(this)">
        </div>

        <div id="drone-filter">
            <div class="container">
                <div class="row clearfix">
                    <form>
                        <div class="col-md-4 col-sm-6 col-xs-12">
                            <table>
                                <tr>
                                    <th>系统名称:</th>
                                    <td><select name="system_id"
                                                id="system_id">
                                            <option value="">请选择</option>
                                            {% for id,name in systemLists %}
                                                <option value="{{ id }}">{{ name }}</option>
                                            {% endfor %}
                                        </select></td>
                                </tr>
                                <tr>
                                    <th>飞机类型:</th>
                                    <td><select name="planeModel"
                                                id="planeModel">
                                            <option value="">请选择</option>
                                            {% for id,name in planeModelList %}
                                                <option value="{{ id }}">{{ name }}</option>
                                            {% endfor %}
                                        </select></td>
                                </tr>
                                <tr>
                                    <th>航行距离(米):</th>
                                    <td><input type="text" value="500" data-valid="number" name="filterDistance" id="filterDistance"></td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-md-4 col-sm-6 col-xs-12">
                            <table>
                                <tr>
                                    <th>飞机序列号:</th>
                                    <td><input type="text" name="uas_serial_id" id="uas_serial_id"></td>
                                </tr>
                                <tr>
                                    <th>飞行日期:</th>
                                    <td><input data-attr="date" name="startDate" id="startDate" type="date-h"
                                               value="">-<input data-attr="date" name="endDate" id="endDate"
                                                                type="date-h" class="end" value="">
                                    </td>
                                </tr>
                                <tr>
                                    <th>载荷类型:</th>
                                    <td><select name="camera_type"
                                                id="camera_type">
                                            <option value="">请选择</option>
                                            {% for camera_type in cameraType %}
                                                <option value="{{ camera_type }}">{{ camera_type }}</option>
                                            {% endfor %}
                                        </select></td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-md-4 col-sm-6 col-xs-12">
                            <table>
                                <tr>
                                    <th>降落类型:</th>
                                    <td><select name="landingMethod" id="landingMethod">
                                            <option selected value="">- 请选择 -</option>
                                            <option value="0">伞降</option>
                                            <option value="1">滑降</option>
                                        </select></td>
                                </tr>
                                <tr>
                                    <th>航行时间(分钟):</th>
                                    <td><input type="text" data-valid="number" value="5" name="filterTime" id="filterTime"></td>
                                </tr>
                                <tr>
                                    <td colspan="2">
                                        <div class="btn-0 button" onclick="clickReset()">重 置</div>
                                        <div class="btn-1 button" onclick="sendMessage()">过 滤</div>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </form>
                </div>
            </div> <!-- .container -->
        </div>
    </div>

    <div id="data-wrap">
        <div class="drone-statistics-container">
            <div style="height: 15px; width: 100%;"></div>
            <table class="drone-cnt-wrap" cellpadding="0" cellspacing="0">
                <tr>
                    <td>
                        <canvas id="drone-cnt-canvas" width=170 height=170></canvas>
                        <ul>
                            <li><span class="num">0</span>&nbsp;架</li>
                            <li><span class="type">飞机数量</span></li>
                        </ul>
                    </td>
                </tr>
                <tr>
                    <td><span class="total">0</span>&nbsp;架飞机</td>
                </tr>
            </table>
            <table class="info-table" cellpadding="0" cellspacing="0">
                <tr><td>
                        <div>
                            <span class="name">飞行里程</span>
                            <span class="value">
									<span class="num">0</span>
									<span class="sep"> / </span>
									<span class="total">0</span>
									<span class="sep">公里</span>
								</span>
                        </div>
                        <canvas id="mileage-progress-canvas" width=270 height=10></canvas>
                </td></tr>
                <tr><td>
                        <div>
                            <span class="name">飞行面积</span>
                            <span class="value">
									<span class="num">0</span>
									<span class="sep"> / </span>
									<span class="total">0</span>
									<span class="sep">平方公里</span>
								</span>
                        </div>
                        <canvas id="area-progress-canvas" width=270 height=10></canvas>
                </td></tr>
                <tr><td>
                        <div>
                            <span class="name">飞行时长</span>
                            <span class="value">
									<span class="num">0</span>
									<span class="sep"> / </span>
									<span class="total">0</span>
									<span class="sep">小时</span>
								</span>
                        </div>
                        <canvas id="duration-progress-canvas" width=270 height=10></canvas>
                </td></tr>
                <tr><td>
                        <div>
                            <span class="name">飞行架次</span>
                            <span class="value">
									<span class="num">0</span>
									<span class="sep"> / </span>
									<span class="total">0</span>
									<span class="sep">架次</span>
								</span>
                        </div>
                        <canvas id="flight-cnt-progress-canvas" width=270 height=10></canvas>
                </td></tr>
                <tr>
                    <td class="info">统计信息截止：{{ statDate }} </td>
                </tr>
            </table>
        </div>

        <div class="map-statistics-container">
            <div class="sub-wrap">
                <div class="statistics">
                    <table>
                        <tr>
                            <td class="pie">
                                <canvas id="pie-mileage" width="98" height="98"></canvas>
                            </td>
                            <td class="name">区域里程<span class="value">0</span><br><span class="total">总里程:&nbsp;<span class="num">0</span></span></td>
                        </tr>
                        <tr>
                            <td class="pie">
                                <canvas id="pie-area" width="98" height="98"></canvas>
                            </td>
                            <td class="name">区域面积<span class="value">0</span><br><span class="total">总面积:&nbsp;<span class="num">0</span></span></td>
                        </tr>
                        <tr>
                            <td class="pie">
                                <canvas id="pie-duration" width="98" height="98"></canvas>
                            </td>
                            <td class="name">区域时长<span class="value">0</span><br><span class="total">总时长:&nbsp;<span class="num">0</span></span></td>
                        </tr>
                        <tr>
                            <td class="pie">
                                <canvas id="pie-flight-cnt" width="98" height="98"></canvas>
                            </td>
                            <td class="name">区域架次<span class="value">0</span><br><span class="total">总架次:&nbsp;<span class="num">0</span></span></td>
                        </tr>
                    </table>
                </div>

                <div class="map-wrap">
                    <div id="vector-map-container">
                        <div class="area">
                            <h3>当前显示</h3>
                            <p><!--内蒙古 广西 广东--></p>
                            <h3 class="clear button" onClick="zoneStatisticsM.mapRestore()">清除全部</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div style="display: none">
        <label id="totalPlane">{{ totalPlane }}</label>
        <label id="totalMil">{{ totalMil }}</label>
        <label id="work_areas">{{ work_areas }}</label>
        <label id="work_times">{{ work_times }}</label>
        <label id="totalMission">{{ totalMission }}</label>

        <label id="filterPlane">{{ totalPlane }}</label>
        <label id="filterMil">{{ totalMil }}</label>
        <label id="filter_areas">{{ work_areas }}</label>
        <label id="filter_times">{{ work_times }}</label>
        <label id="filterMission">{{ totalMission }}</label>

        <label id="provinceList">{{ provinceList }}</label>
        <div id="subsystemId">{{ subsystemId }}</div>
    </div>
</main>
</body>

{% include 'template/baseJs.volt' %}
<script src="/js/jquery.vector-map.js" type="text/javascript"></script>
<script src="/js/china-zh.js" type="text/javascript"></script>
<script src="/js/vendor/vector-map.js" type="text/javascript"></script>
<script src="/js/vendor/chart-h.js"></script>
<script src="/js/vendor/zone-statistics.js"></script>

<script>
    var DataFilterProxy = {
        //历史所有
        totalPlane: 0,
        totalMil: 0,
        totalWorkArea: 0,
        totalWorkTime: 0,
        totalMission: 0,
        //当前过滤后的数据
        curPlane: 0,
        curMil: 0,
        curWorkArea: 0,
        curWorkTime: 0,
        curMission: 0,
        curProvince: false,
        //当前区域过滤后的数据
        zoneMil: 0,
        zoneWorkArea: 0,
        zoneWorkTime: 0,
        zoneMission: 0,
        zoneSelectedProvinceList:[],
        init: function () {

            document.onkeydown = function (event) {
                var e = event || window.event;
                if (e && e.keyCode == 13) { //回车键的键值为13
                    sendMessage();
                }
            };

            var subSystemId=$("#subsystemId").text();
            if(subSystemId!=1){
                $("#system_id").val(subSystemId);
                $("#system_id").attr("disabled","disabled");
            }

            DataValidBinder.bind();

            this.totalPlane = parseInt($("#totalPlane").text());
            this.totalMil = parseFloat($("#totalMil").text());
            this.totalWorkArea = parseFloat($("#work_areas").text());
            this.totalWorkTime = parseFloat($("#work_times").text());
            this.totalMission = parseFloat($("#totalMission").text());

            this.curProvince = eval("(" + $("#provinceList").text() + ")");
            this.curPlane = this.totalPlane;
            this.curMil = this.totalMil;
            this.curWorkArea = this.totalWorkArea;
            this.curWorkTime = this.totalWorkTime;
            this.curMission = this.totalMission;
            this.refresh();
        },
        updateZoneByPronvince: function () {
            var province=this.zoneSelectedProvinceList;
            if (province&&province.length <= 0) {
                this.resetZoneValue();
                this.refreshZone();
                return;
            }
            var targetMil = 0;
            var targetMission = 0;
            var targetWorkArea = 0;
            var targetWorkTime = 0;
            if (this.curProvince) {
                for (var item in this.curProvince) {
                    for (var i = 0; i < province.length; i++) {
                        var targetProvince = province[i];
                        if (item.indexOf(targetProvince) >= 0) {
                            var obj = this.curProvince[item];
                            targetMil += parseFloat(obj.sumMil);
                            targetMission += parseFloat(obj.fsTotal);
                            targetWorkArea += parseFloat(obj.work_areas);
                            targetWorkTime += parseFloat(obj.workTime);
                        }
                    }
                }
            }
            if (this.zoneMil != targetMil
                    && this.zoneWorkArea != targetWorkArea
                    && this.zoneMission != targetMission
                    && this.zoneWorkTime != targetWorkTime
            ) {
                this.zoneMil = targetMil;
                this.zoneWorkArea = targetWorkArea;
                this.zoneMission = targetMission;
                this.zoneWorkTime = targetWorkTime;
                this.refreshZone();
            }

        },
        resetZoneValue: function () {
            this.zoneMil = this.curMil;
            this.zoneWorkArea = this.curWorkArea;
            this.zoneWorkTime = this.curWorkTime;
            this.zoneMission = this.curMission;
        },
        refresh: function () {

            //全局变量
            var globalData = {
                droneCnt: {total: DataFilterProxy.totalPlane, filter: DataFilterProxy.curPlane},
                mileage: {total: DataFilterProxy.totalMil, filter: DataFilterProxy.curMil},
                area: {total: DataFilterProxy.totalWorkArea, filter: DataFilterProxy.curWorkArea},
                duration: {total: DataFilterProxy.totalWorkTime, filter: DataFilterProxy.curWorkTime},
                flightCnt: {total: DataFilterProxy.totalMission, filter: DataFilterProxy.curMission}
            };
            // 更新过滤统计数据
            zoneStatisticsM.filterStatistics.update(globalData);

            this.resetZoneValue();

            this.updateZoneByPronvince();
        },
        refreshZone: function () {
            var zoneData = {
                mileage: {total: DataFilterProxy.curMil, zone: DataFilterProxy.zoneMil},
                area: {total: DataFilterProxy.curWorkArea, zone: DataFilterProxy.zoneWorkArea},
                duration: {total: DataFilterProxy.curWorkTime, zone: DataFilterProxy.zoneWorkTime},
                flightCnt: {total: DataFilterProxy.curMission, zone: DataFilterProxy.zoneMission}
            };
            zoneStatisticsM.zoneStatistics.update(zoneData);
        }
    };

    // demo代码
    // 地图点击区域名
    zoneStatisticsM.mapZoneChangedCallback = function (checkedZoneNames) {
        console.log(checkedZoneNames);
        DataFilterProxy.zoneSelectedProvinceList=checkedZoneNames;
        DataFilterProxy.updateZoneByPronvince();
    };

    function sendMessage() {

        if(DataValidBinder.valid()){
            loadingView.show();
            feimaPost("/monitor/sysStatSearch", $("form").serialize(), function (result) {
                loadingView.remove();
                var data = result;
                if (data.status == 0) {
                    DataFilterProxy.curPlane = parseInt(data.message.totalPlane);
                    DataFilterProxy.curMil = parseFloat(data.message.totalMil);
                    DataFilterProxy.curWorkArea = parseFloat(data.message.work_areas);
                    DataFilterProxy.curWorkTime = parseFloat(data.message.work_times);
                    DataFilterProxy.curMission = parseFloat(data.message.totalMission);
                    var targetProvinceList=eval("(" + data.message.provinceList + ")");
                    DataFilterProxy.curProvince = targetProvinceList;
                    DataFilterProxy.refresh();

                }
            });
        }

    }
    function clickReset(){
        $("input").each(function(){
            var item=$(this);
            item.val("");
            if(item.attr("name")=="filterDistance"){
                item.val("500");
            }
            if(item.attr("name")=="filterTime"){
                item.val("5");
            }

        })
        $("select").each(function(){
            $(this).val("");
        })
    }

    $(function () {

        loadingView.show();
        feimaPost("/monitor/sysStatSearch", $("form").serialize(), function (result) {
            loadingView.remove();
            if(result.status==0){
                var data=result.message;
                $("#totalPlane").text(data["totalPlane"]);
                $("#totalMil").text(data["totalMil"]);
                $("#work_areas").text(data["work_areas"]);
                $("#work_times").text(data["work_times"]);
                $("#totalMission").text(data["totalMission"]);
                $("#provinceList").text(data["provinceList"]);

                DataFilterProxy.init();
            }
        });

    });

</script>

</html>